<template>
  <div>
    <p>Made with <i class="fa fa-heart throb"/> by <span class="author" itemprop="copyrightHolder">Onei</span>.</p>
  </div>
</template>

<script>
export default {
  name: "fFooter"
}
</script>

<style scoped lang="scss">
.el-footer {
  background-color: #B3C0D1;
  color: #333;
}
/* 定义心跳动画 */
@keyframes heartbeat-animate {

  0%, 100% {
    transform: scale(1)
  }

  10%, 30% {
    transform: scale(.88)
  }

  20%, 40%, 60%, 80% {
    transform: scale(1.08)
  }

  50%, 70% {
    transform: scale(1.08)
  }
}

/* 默认状态 */
.fa-heart.throb {
  color:#d43f57;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* 鼠标悬停时的效果 */
  &:hover {
    animation: heartbeat-animate 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
  }
}
</style>
